﻿.navi-0011-wrapper{animation-duration:0.001s}
@media screen and (min-width: 0px){.navi-0011-wrapper{animation-name:mobile}}
@media screen and (min-width: 768px){.navi-0011-wrapper{animation-name:tablet}}
@media screen and (min-width: 1024px){.navi-0011-wrapper{animation-name:desktop}}
@keyframes mobile{from{clip:rect(1px, auto, auto, auto)}to{clip:rect(0px, auto, auto, auto)}}
@keyframes tablet{from{clip:rect(1px, auto, auto, auto)}to{clip:rect(0px, auto, auto, auto)}}
@keyframes desktop{from{clip:rect(1px, auto, auto, auto)}to{clip:rect(0px, auto, auto, auto)}}
.wrapper{background: rgba(0,0,0,0.88);}
.content-area{max-width:1365px; margin:0 auto}
.header-wrapper{position:absolute; width:100%}
.navi-wrapper a{color:#fff}
.navi-col{float:left; background:rgba(0, 69, 124, 1); width:33.3%; text-align:center; height:80px; font-size: 13px; line-height: 1.4; font-family: "Open Sans", Arial; }
.navi-col + .navi-col{border-left:1px solid #fff}
.logo-col{background:#fff; padding:6px 16px; width:auto; display:block; float:none}
.logo-group{display:table;}
.logo-group > div{display:table-cell; vertical-align:middle; padding:12px 28px}
.logo-group > div:last-child{border-left:2px solid rgba(0, 0, 0, 0.2)}
.navi-icon img{margin:13px 0 2px 0}
.navi-icon:hover {text-decoration:none}

.navi-0011-wrapper{text-transform:uppercase; color:#fff} .navi-0011-wrapper:not(.menu-wrap){display:inline-block; position:relative; vertical-align:middle; }
.navi-0011-wrapper .burger-menu{cursor:pointer; min-width:28px; position:relative; }
.navi-0011-wrapper .burger-line{border-radius:5px; display:block; height:3px; margin-bottom:8px; background:#fff}
.navi-0011-wrapper .nav-close{cursor:pointer; height:40px; position:relative; width:40px; margin:0 0 0 auto; }
.navi-0011-wrapper .nav-line{border-radius:5px; height:2px; position:absolute; top:50%; transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); width:40px;}
.navi-0011-wrapper .nav-line + .nav-line{transform:rotate(135deg); -webkit-transform:rotate(135deg); -moz-transform:rotate(135deg); -ms-transform:rotate(135deg); }

.navi-0011-wrapper.menu-wrap{display:none; position:absolute; z-index:5; }
.navi-0011-wrapper .menu-attach-left{left:0; } 
.navi-0011-wrapper .menu-attach-right{right:0; } 
.navi-0011-wrapper .menu-attach-right .nav-close{text-align:right; }
.navi-0011-wrapper .nav-list, .navi-0011-wrapper .sub-nav-list{list-style:none; margin:0; padding:0; font-weight:bold;}

.navi-0011-wrapper .placeholder{opacity:0; }
.navi-0011-wrapper .nav-list{list-style-type:none; margin:0; padding:0; }
.navi-0011-wrapper .nav-list li{position:relative; text-align:left; width:100%; }
.navi-0011-wrapper .nav-list a{display:block; padding:11px 40px 12px 20px; text-decoration:none;  }
.navi-0011-wrapper .nav-list li + li > a{border-top:1px solid #fff;}

.navi-0011-wrapper .nav-list > li .arrow{cursor:pointer; height:48px; width:48px; position:absolute; right:0; top:0; transform-origin:50% 6px; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transition:all 0.2s; -webkit-transition:all 0.2s; -moz-transition:all 0.2s; -o-transition:all 0.2s; -ms-transition:all 0.2s; z-index:2;}
.navi-0011-wrapper .nav-list > li .arrow:before{border:2px solid #ccc; border-top:none; border-right:none; content:''; display:block; height:12px; position:absolute; left:50%; transform:translate(-50%,-50%) rotate(-45deg); -webkit-transform:translate(-50%,-50%) rotate(-45deg); -moz-transform:translate(-50%,-50%) rotate(-45deg); -o-transform:translate(-50%,-50%) rotate(-45deg); -ms-transform:translate(-50%,-50%) rotate(-45deg); top:50%; width:12px; }
/*.navi-0011-wrapper .nav-list > li:hover .sub-nav-list,*/ .navi-0011-wrapper .nav-list > li.select .sub-nav-list{display:block; width:100%; }
.navi-0011-wrapper .nav-list li .sub-nav-list{display:none;  }

.navi-0011-wrapper .sub-nav-list li a{padding-left:40px; text-decoration:none; }
 /*Burger Line and Text Same Color*/ 
.navi-0011-wrapper .nav-close {cursor: pointer; height: 40px; position: relative; width: 40px; padding: 20px 32px 12px 32px; box-sizing:initial }
.navi-0011-wrapper .burger-line{background-color:#fff}
.navi-0011-wrapper .burger-text{color:#fff}

/*Burger Padding*/
.navi-0011-wrapper .burger-menu{padding:17px 32px 12px 32px}


/*Close Button*/
.navi-0011-wrapper .nav-line{background-color:#a2a2a2}

/*menu Background Color*/
.navi-0011-wrapper.menu-wrap{background-color:#383838;}

/*Hover Color*/
.navi-0011-wrapper .nav-list a{color:#fff; font-weight:bold; font-size:16px}
.navi-0011-wrapper .nav-list a:hover{color:#fff; background:rgba(0, 69, 124, 1)}
.navi-0011-wrapper .sub-nav-list {background:rgba(52, 52, 52, 1)}

@media screen and (min-width:768px){
    .navi-wrapper{margin:0 0 0 50px}
    .navi-wrapper{display:table}
    .navi-col{display:table-cell;vertical-align:middle; width:100px; float:none}
    .navi-icon img{margin:2px 0 2px 0}
    .navi-0011-wrapper .nav-close{margin:0; }
    .navi-0011-wrapper .nav-list > li .arrow:before{border-left:none; border-right:2px solid #ccc; border-top:none; }
    .navi-0011-wrapper.menu-wrap{top:0; display:none; }
    .navi-0011-wrapper .nav-list li{width:300px; }
    .navi-0011-wrapper .sub-nav-list{left:100%;position:absolute;top:1px; }
}

.content-wrapper .content-area{padding:200px 0 50px; background:#fff url(../img/sub_about.jpg) no-repeat 50% 0;min-height:calc(100vh - 60px); }
.navbar-inverse{background:rgba(13, 13, 13, 1)}
.content-area .navbar-fixed-bottom{position:static}
.content-area .container{width:auto; }
.content-area .modal + .container{max-width:1260px; background:#fff}